import React, { useEffect, useState } from 'react';

import '../../../styles/Booking Management/Registration.scss'
import Top from '../../../component/Booking/Top'
import { tablec_list, del_listc, search_listc} from '../../../utils/Booking Management/api'

import { notification, Radio, DatePicker, Space, Button, Table, ConfigProvider } from 'antd';
import { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import { CopyFilled, DeleteOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
interface Props {

}
// 表格
interface DataType {
    key: string;
    name: string;
    jnumber: string;
    snumber: string;
    phone: string;
    active: string;
    ghks: string;
    moeny: string;
    over: string;
    jday: string;
}
function Physical(props:Props) {
    let gengGai = {
        title: '预约体检'
    }

    const columns: ColumnsType<DataType> = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '就诊卡号',
            dataIndex: 'jnumber',
            key: 'jnumber',
        },
        {
            title: '身份证号',
            dataIndex: 'snumber',
            key: 'snumber',
        },
        {
            title: '手机号码',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '套餐',
            dataIndex: 'ghks',
            key: 'ghks',
        },
        {
            title: '费用',
            dataIndex: 'money',
            key: 'money',
        },
        {
            title: '状态',
            dataIndex: 'over',
            key: 'over',
        },
        {
            title: '体检日期',
            dataIndex: 'jday',
            key: 'jday',
        },
        {
            title: '预约时间',
            dataIndex: 'jday',
            key: 'jday',
        },
        {
            title: '操作',
            key: 'tags',
            render: (_, record) => (
                <Space size="middle">
                    <a><CopyFilled onClick={() => { lookup(record)}} /></a>
                    <a><DeleteOutlined onClick={() => { toDel(record,) }} /></a>
                </Space>
            ),
        },
    ];

    // 时间表格
    const { RangePicker } = DatePicker;

    // 跳转路由
    let navigate = useNavigate()
    // 获取列表内容
    let [data, setdata] = useState([])
    // 获取数据
    useEffect(() => {
        //解构获取的数据
        tablec_list().then(({ data }) => {
            console.log(data);
            setdata(data)
            // setdata(data=[...data])
        })
    }, [])
    // 按名字搜索
    const onSearch = (value: string) => {
        let seachkey = value
        console.log(seachkey);
        search_listc(seachkey).then((res) => {
            console.log("查询的", res.data);
            setdata(res.data);
            notification.success({ message: '查询成功！' });
        })
    }
    // 删除
    let toDel = (record: any) => {
        let id = record.id
        del_listc(id).then((res) => {
            tablec_list().then((res) => {
                setdata(res.data)
            })
            notification.success({ message: '删除成功！' })
        })
    }
    // 复选框
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };

    // 分页器
    let [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 })
    // 分页
    const page = (page: TablePaginationConfig) => {}

    // 查看详情
    let lookup = (a:any)=>{
        navigate("/index/bookingmanagement/looklist",{state:a})
        // let id = record.id
        // look_list(id).then((res) => {
        //     navigate("/index/bookingmanagement/looklist")
        // })
    }
    return (
        <div className='reg-all'>
            <Top {...gengGai} />
            <div className='reg-minall'>
                <div className='minall-top'>
                    <div className='minall-top-left'>
                        <Radio>全部</Radio>
                        <Radio>待就诊</Radio>
                        <Radio>已就诊</Radio>
                        <Radio>已取消</Radio>
                    </div>
                    <Space direction="vertical" size={8}>
                        <RangePicker placeholder={['开始日期', '结束日期']} size='small' />
                    </Space>
                    <Button type='primary' style={{marginTop:22}}>搜索</Button>
                </div>
                <ConfigProvider>
                    <Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} rowSelection={rowSelection} />
                </ConfigProvider>
            </div>
        </div>
    );
}

export default Physical;